<template>
  <view class="container">
    <view class="header">
      <view>
        <image class="icon" src="/static/images/localIcon.png" />
        <text class="area"> 北京<text class="arrow-down"></text></text>
      </view>
      <input class="input" type="text" placeholder="搜文章/找大学/查专业">
      <image class="icon" src="/static/images/cataIcon.png" @tap="cata" />
      <image class="search-icon" src="/static/icon/search-icon.png" />
    </view>
    <view class="header-title">
      志愿填报智能推荐
    </view>
    <view class="header-desc">不浪费一分，科学填报，降低志愿风险</view>
    <view class="box">
      <view class="box-title"> 点灯前行注册和登录</view>
      <view class="box-item">
        <image class="icon" src="/static/icon/mobile-icon.png" />
        <input class="input" placeholder="请输入手机号码">
      </view>
      <view class="box-item" v-if="!isPassWord || !isLogin">
        <image class="icon" src="/static/icon/code-icon.png" />
        <input class="input" placeholder="请输入验证码">
        <view class="code">发送验证码</view>
      </view>
      <view class="box-item" v-if="isPassWord || !isLogin">
        <image class="icon" src="/static/icon/lock-icon.png" />
        <input class="input" placeholder="请输入密码">
      </view>
      <button class="button">登录/注册</button>
      <view class="pass-word" v-if="isLogin">
        <view v-if="!isPassWord" @tap="isPassWord = !isPassWord">密码登录</view>
        <view v-if="isPassWord" @tap="isPassWord = !isPassWord">验证码登录</view>
        <view @tap="isLogin = false">忘记密码</view>
      </view>
      <view class="footer" v-if="isLogin">
        <label class="radio">
          <checkbox value="footer" color="#d01117" style="transform:scale(0.7); border-radius: 50%;" />
        </label>我已阅读并同意《点灯前行用户协议》
      </view>
    </view>
  </view>
</template>
  
<script>
export default {
  data() {
    return {
      isPassWord: true,
      isLogin: true
    };
  },
  methods: {
  }
};
</script>
  
<style lang="less" scoped>
@primary: #d01117;

page {
  background-color: #fff;
}

.container {
  background-image: linear-gradient(to bottom, #f64801, #ffffff);
  height: 800upx;
}

.header {
  display: flex;
  padding: 30upx;
  justify-content: space-between;
  position: relative;

  .icon {
    width: 33upx;
    height: 33upx;
    position: relative;
    top: 20upx;
  }

  .input {
    box-sizing: border-box;
    background-color: #fff;
    height: 70upx;
    width: 480upx;
    border-radius: 15upx;
    padding: 0 60upx;
  }

  .search-icon {
    width: 30upx;
    height: 30upx;
    position: absolute;
    left: 190upx;
    top: 50upx;
  }

  .area {
    color: white;
    font-size: 28upx;
    line-height: 33upx;
    position: relative;
    top: 15upx;
    left: 10upx;

    .arrow-down {
      border-top: 5px solid #fff;
      top: 25upx;
    }
  }
}

.header-title {
  text-align: center;
  color: #fff;
  font-size: 50upx;
  margin: 40upx 0 20upx 0;
}

.header-desc {
  color: #fff;
  text-align: center;
  font-size: 28upx;
  margin-bottom: 30upx;
}

.box {
  width: 690upx;
  height: 660upx;
  margin: 30upx auto;
  background-color: white;
  border-radius: 15upx;
  padding: 35upx;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);

  .box-title {
    text-align: center;
    font-size: 32upx;
    font-weight: 700;
    padding-bottom: 35upx;
  }

  .box-cell {
    display: flex;
    justify-content: space-between;
    width: 620upx;
    height: 80upx;
    border: 1upx solid #666666;
    border-radius: 15upx;
    line-height: 80upx;
    margin: 15upx auto;
    padding: 0 30upx;

    .input {
      height: 35upx;
    }

    .input:placeholder {
      font-size: 26upx;
      line-height: 35upx;
      color: #cccccc
    }
  }

  .box-item {
    height: 90upx;
    padding: 20upx 0 20upx 70upx;
    border-bottom: 1upx solid #ede9e9;
    position: relative;

    .code {
      position: absolute;
      bottom: 15upx;
      right: 0;
      width: 144upx;
      height: 44upx;
      background-color: @primary;
      color: #fff;
      font-size: 26upx;
      text-align: center;
      line-height: 44upx;
      border-radius: 22upx;
    }

    .icon {
      position: absolute;
      width: 22upx;
      height: 26upx;
      left: 0;
      top: 30upx;
      left: 20upx;
    }
  }

  .pass-word {
    display: flex;
    justify-content: space-between;
    color: #666666;
    padding: 30upx 0;
  }

  .button {
    // background-color: #e7888b;
    background-color: @primary;
    color: #fff;
    margin: 90upx 0 0 0;
  }

  .footer {
    text-align: center;
    font-size: 23upx;
    color: #ccc;
  }

  ::v-deep .uni-checkbox-input {
    border-radius: 50% !important;
  }

  ::v-deep .uni-checkbox-input:hover {
    border-color: @primary;
  }
}
</style>